<template>
  <div class="recording">
    <dragConent>
      <dragWidth v-model:leftWidth="leftWidth" :maxWidth="maxWidth" :minWidth="'20%'" @change="changeWidth">
        <template #left>
          <div class="left-content">
            <toolbar></toolbar>
            <div class="auido-list" @mousedown.stop>
              <el-scrollbar>
                <div class="null" style="height: 65vh">
                  <occupyPicture></occupyPicture>
                </div>
              </el-scrollbar>
            </div>
            <div class="audio-utils">
              <audioUtils @recording="startRecord"></audioUtils>
            </div>
          </div>
        </template>
        <template #right>
          <div class="right-content">
            <div class="null">
              <occupyPicture></occupyPicture>
            </div>
          </div>
        </template>
      </dragWidth>
    </dragConent>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import hooks from '@/hooks/index'
import { useSystemStore } from '@/pinia/system'
const systemStore = useSystemStore()

const router = useRouter()
const toolbar = defineAsyncComponent(() => import('@/components/toolbar.vue'))
const audioUtils = defineAsyncComponent(() => import('./components/audioUtils.vue'))
const dragWidth = defineAsyncComponent(() => import('@/components/dragWidth.vue'))
const dragConent = defineAsyncComponent(() => import('@/components/Dragareacomponent.vue'))
const occupyPicture = defineAsyncComponent(() => import('@/components/occupyPicture.vue'))
const leftWidth = ref('30%')
const maxWidth = ref('90%')
const changeWidth = (width: string) => {
  console.log("kankan1", width);
  hooks.uconfig.saveLayout(width)
}
// 左侧内容区域宽度

const startRecord = async () => {
  console.log("我擦", systemStore.fileStorage.audioFile);
  if (systemStore.fileStorage.audioFile.trim() === '') {
    //设置默认保存路径
    ElMessageBox.confirm('当前未配置保存文件的路径,请先设置文件保存路径', 'Warning', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        hooks.upath.saveAudio().then((folderPath) => {
          if (folderPath) {
            router.push({ path:'/clipAudio'})
          } else {
            ElMessage.error('路径设置失败,请重新尝试')
          }
        })
      })
      .catch(() => {})
  } else {
       router.push({ path:'/clipAudio'})
  }
}
</script>

<style scoped lang="scss">
.recording {
  background-color: #d9e4f9;
}
.left-content {
  height: 100%;
}
.right-content {
  background-color: #fff;
  height: 100%;
}
.null {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
